<template>
  <div class="app-container">
    <el-card class="box-card" style="height: 80vh">
      <div slot="header" style="font-size: 24px; font-weight: 600">
        <span>{{ $t("unbinding.pendingAllocation") }}</span>
      </div>
      <el-descriptions
        class="margin-top"
        :title="$t('unbinding.orderInfo')"
        :column="2"
        :label-style="{ fontSize: '24px', fontWeight: '600' }"
        :content-style="{ fontSize: '24px' }"
        border
      >
        <template slot="extra">
          <div style="display: flex; align-items: center">
            <label style="font-size: 16px; font-weight: 100; margin-right: 10px">{{
              $t("unbinding.stationName")
            }}</label>
            <el-select
              v-model="stationName"
              clearable
              size="small"
              :placeholder="$t('unbinding.stationName')"
            >
              <el-option
                v-for="item in stationList"
                :key="item.id"
                :label="item.uiName"
                :value="item.stationName"
                :disabled="item.stationStatus !== 1"
              />
            </el-select>
            <el-button type="primary" size="small" style="margin-left: 10px; width: 80px" @click="submit">{{ $t("crud.confirm") }}</el-button>
          </div>
        </template>
        <el-descriptions-item>
          <template slot="label">
            {{ $t("unbinding.unbindingOrderCode1") }}
          </template>
          {{ orderInfo.unbindingOrderCode }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            {{ $t("unbinding.workingPress") }}
          </template>
          {{ orderInfo.pressMachineName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            {{ $t("unbinding.potId") }}
          </template>
          {{ orderInfo.potId }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            {{ $t("outbound.processcardCode") }}
          </template>
          {{ orderInfo.processcardCode }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            {{ $t("processcard.workNum") }}
          </template>
          {{ orderInfo.workNum }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            {{ $t("inventory.layerName") }}
          </template>
          {{ orderInfo.layerName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            {{ $t("pallet.palletCode") }}
          </template>
          {{ orderInfo.palletCode ? orderInfo.palletCode.toString() : null }}
        </el-descriptions-item>
      </el-descriptions>

    </el-card>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { EventSourcePolyfill } from 'event-source-polyfill'
import {
  getUnbindingOrder,
  getAllStationInfoAPI,
  distribute
} from '@/api/unbinding'
import i18n from '@/lang'
export default {
  data() {
    return {
      // 当前扫码口的拆解单信息
      orderInfo: {},
      // 获取所有拆解站信息
      stationList: [],
      stationName: '',
      currentMessage: null,
      timer: null
    }
  },
  mounted() {
    this.createSSE()
    this.getScanOrder()
    this.getAllStationInfo()
  },
  beforeDestroy() {
    this.es.close()
    clearTimeout(this.timer)
  },
  methods: {
    createSSE() {
      const baseURL = process.env.VUE_APP_BASE_API
      const url = `${baseURL}/api/unbindingMsg`
      const that = this
      this.es = new EventSourcePolyfill(url, {
        headers: { 'Authorization': getToken() }
      })
      this.es.onopen = function(event) {
        console.log('连接成功', event)
      }
      this.es.onmessage = function(event) {
        const parsedData = JSON.parse(event.data)
        if (parsedData.meta.msg) {
          if (that.currentMessage) {
            return
          }
          that.currentMessage = that.$message({
            message: that.$t('unbinding.msg1') + `${parsedData.meta.msg}` + that.$t('unbinding.msg2'),
            type: 'error',
            duration: 0,
            showClose: true,
            onClose: () => {
              that.timer = setTimeout(() => {
                that.currentMessage = null
              }, 5000)
            }
          })
        }
      }
      this.es.onerror = function(error) {
        console.log('错误', error)
      }
    },
    handleError() {
      if (this.es.readyState === EventSourcePolyfill.CLOSED) {
        this.es.close()
        this.createSSE()
      } else if (this.es.readyState === EventSourcePolyfill.CONNECTING) {
        console.log('正在重连中')
      }
    },
    // 获取当前扫码口的拆解单
    getScanOrder() {
      getUnbindingOrder().then((res) => {
        if (res.meta.code === 200) {
          this.orderInfo = res.data.notAssignedOrderInfo
        } else {
          this.$message.info(res.meta.msg)
        }
      })
    },
    // 获取所有拆解站信息
    getAllStationInfo() {
      getAllStationInfoAPI().then((res) => {
        if (res.meta.code === 200) {
          this.stationList = res.data.UnbindingStations
        }
      })
    },
    submit() {
      if (!this.orderInfo.unbindingOrderCode) {
        return this.$message.warning(i18n.t('tipsInfo.confirmUnbinding1'))
      }
      if (this.stationName === '') {
        return this.$message.warning(i18n.t('tipsInfo.confirmUnbinding2'))
      }
      const submitForm = {
        unbindingOrderCode: this.orderInfo.unbindingOrderCode,
        stationName: this.stationName
      }
      distribute(submitForm).then((res) => {
        if (res.meta.code === 200) {
          this.$message.success(res.meta.msg)
          this.orderInfo = {}
          this.stationName = ''
          this.getScanOrder()
          this.getAllStationInfo()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
}
</style>
